<template>
  <lay-layout class="layui-layout-document">
    <lay-header
      ><lay-logo style="box-shadow: 0 0px 2px 0 rgba(0, 0, 0, 0.15)">
        <img src="../assets/logo.png" />
      </lay-logo>
      <ul
        class="layui-nav layui-layout-left"
        style="margin-top: 0px; margin-bottom: 0px"
      >
        <li class="layui-nav-item">
          <router-link to="/zh-CN/index"> 首页 </router-link>
        </li>
        <li class="layui-nav-item">
          <router-link to="/zh-CN/guide"> 指南 </router-link>
        </li>
        <li class="layui-nav-item">
          <router-link to="/zh-CN/components"> 组件 </router-link>
        </li>
        <li class="layui-nav-item">
          <router-link to="/zh-CN/hooks"> hooks </router-link>
        </li>
        <li class="layui-nav-item">
          <lay-form>
            <lay-search :datas="menus" />
          </lay-form>
        </li>
      </ul>
      <ul
        class="layui-nav layui-layout-right"
        style="margin-top: 0px; margin-bottom: 0px"
      >
        <li class="layui-nav-item">
          <a href="https://gitee.com/layui-vue">
            <lay-icon type="layui-icon-fonts-code" size="14px"></lay-icon>
          </a>
        </li>
        <li class="layui-nav-item">
          <a
            href="https://gitee.com/layui-vue/layui-vue/issues?assignee_id=&author_id=&branch=&collaborator_ids=&issue_search=&label_ids=&label_text=&milestone_id=&priority=&private_issue=&program_id=&project_id=Jmysy%2Flayui-vue&project_type=&scope=&sort=&state=all&target_project="
          >
            <lay-icon type="layui-icon-chat" size="14px"></lay-icon>
          </a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:void(0)"> 0.2.6 </a>
        </li>
      </ul>
    </lay-header>
    <router-view></router-view>
  </lay-layout>
</template>
<script>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()
    const currentPath = ref('/zh-CN/guide')

    watch(
      () => route.path,
      (val) => {
        currentPath.value = val
      },
      {
        immediate: true,
        deep: true,
      }
    )

    const menus = [
      {
        id: 1,
        title: '介绍',
        subTitle: 'introduce',
        path: '/zh-CN/guide/introduce',
      },
      {
        id: 2,
        title: '安装',
        subTitle: 'get started',
        path: '/zh-CN/guide/getStarted',
      },
      {
        id: 3,
        title: '更新',
        subTitle: 'change log',
        path: '/zh-CN/guide/changelog',
      },
      {
        id: 4,
        title: '布局',
        subTitle: 'layout',
        path: '/zh-CN/components/layout',
      },
      {
        id: 5,
        title: '容器',
        subTitle: 'container',
        path: '/zh-CN/components/container',
      },
      {
        id: 6,
        title: '按钮',
        subTitle: 'button',
        path: '/zh-CN/components/button',
      },
      {
        id: 7,
        title: '图标',
        subTitle: 'iconfont',
        path: '/zh-CN/components/icon',
      },
      {
        id: 8,
        title: '面板',
        subTitle: 'panel',
        path: '/zh-CN/components/panel',
      },
      {
        id: 9,
        title: '卡片',
        subTitle: 'card',
        path: '/zh-CN/components/card',
      },
      {
        id: 10,
        title: '动画',
        subTitle: 'animation',
        path: '/zh-CN/components/animation',
      },
      {
        id: 11,
        title: '栅格',
        subTitle: 'grid',
        path: '/zh-CN/components/grid',
      },
      {
        id: 12,
        title: '表单',
        subTitle: 'form',
        path: '/zh-CN/components/form',
      },
      {
        id: 13,
        title: '徽章',
        subTitle: 'badge',
        path: '/zh-CN/components/badge',
      },
      {
        id: 14,
        title: '区块',
        subTitle: 'block',
        path: '/zh-CN/components/block',
      },
      {
        id: 15,
        title: '分割',
        subTitle: 'line',
        path: '/zh-CN/components/line',
      },
      {
        id: 16,
        title: '菜单',
        subTitle: 'nav',
        path: '/zh-CN/components/menu',
      },
      {
        id: 17,
        title: '面包屑',
        subTitle: 'breadcrumb',
        path: '/zh-CN/components/breadcrumb',
      },
      {
        id: 18,
        title: '进度',
        subTitle: 'progress',
        path: '/zh-CN/components/progress',
      },
      {
        id: 19,
        title: '时间线',
        subTitle: 'timeline',
        path: '/zh-CN/components/timeline',
      },
      {
        id: 20,
        title: '颜色',
        subTitle: 'color',
        path: '/zh-CN/components/color',
      },
      {
        id: 21,
        title: '手风琴',
        subTitle: 'collapse',
        path: '/zh-CN/components/collapse',
      },
      {
        id: 22,
        title: '表格',
        subTitle: 'table',
        path: '/zh-CN/components/table',
      },
      {
        id: 23,
        title: '头像',
        subTitle: 'avatar',
        path: '/zh-CN/components/avatar',
      },
      {
        id: 24,
        title: '字段',
        subTitle: 'field',
        path: '/zh-CN/components/field',
      },
      {
        id: 25,
        title: '空',
        subTitle: 'empty',
        path: '/zh-CN/components/empty',
      },
      {
        id: 26,
        title: '评分',
        subTitle: 'rate',
        path: '/zh-CN/components/rate',
      },
      {
        id: 27,
        title: '下拉菜单',
        subTitle: 'dropdown',
        path: '/zh-CN/components/dropdown',
      },
      {
        id: 28,
        title: '选项卡',
        subTitle: 'tab',
        path: '/zh-CN/components/tab',
      },
      {
        id: 29,
        title: '图标选择',
        subTitle: 'iconPicker',
        path: '/zh-CN/components/iconPicker',
      },
      {
        id: 29,
        title: '分页',
        subTitle: 'page',
        path: '/zh-CN/components/page',
      },
      {
        id: 30,
        title: '树形组件',
        subTitle: 'tree',
        path: '/zh-CN/components/tree',
      },
      {
        id: 31,
        title: '穿梭框',
        subTitle: 'transfer',
        path: '/zh-CN/components/transfer',
      },
      {
        id: 32,
        title: '复选框',
        subTitle: 'checkbox',
        path: '/zh-CN/components/checkbox',
      },
      {
        id: 33,
        title: '单选框',
        subTitle: 'radio',
        path: '/zh-CN/components/radio',
      },
      {
        id: 34,
        title: '输入框',
        subTitle: 'input',
        path: '/zh-CN/components/input',
      },
      {
        id: 35,
        title: '文本域',
        subTitle: 'textarea',
        path: '/zh-CN/components/textarea',
      },
      {
        id: 36,
        title: '开关',
        subTitle: 'switch',
        path: '/zh-CN/components/switch',
      },
      {
        id: 37,
        title: '滑块',
        subTitle: 'slider',
        path: '/zh-CN/components/slider',
      },
      {
        id: 38,
        title: '轮播',
        subTitle: 'carousel',
        path: '/zh-CN/components/carousel',
      },
      {
        id: 39,
        title: '下拉选择',
        subTitle: 'select',
        path: '/zh-CN/components/select',
      },
      {
        id: 40,
        title: '颜色选择器',
        subTitle: 'colorPicker',
        path: '/zh-CN/components/colorPicker',
      },
    ]

    const handleClick = function (menu) {
      router.push(menu.path)
    }

    return {
      menus,
      currentPath,
      handleClick,
    }
  },
}
</script>
<style>
.layui-layout-document > .layui-header {
  z-index: 9999;
  width: 100%;
  position: fixed;
  background: #393d49;
  border-bottom: 1px solid #404553;
}

.layui-layout-document > .layui-layout > .layui-side {
  overflow-x: hidden;
  position: fixed;
  margin-top: 60px;
  height: calc(100% - 60px);
  box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
}

.layui-layout-document > .layui-layout > .layui-body {
  margin-top: 60px;
  left: 200px;
  position: absolute;
  width: calc(100% - 200px);
  height: calc(100% - 60px);
}

.layui-logo img {
  height: 31px;
  width: 82px;
  left: 15px;
  top: 16px;
}
.layui-header > .layui-nav {
  background-color: transparent;
}
.layui-menu-docs {
  padding-top: 10px;
}
.layui-menu-docs .layui-menu-body-title .layui-font-gray {
  padding-left: 10px;
}
.layui-side hr {
  margin: 8px;
}

@media screen and (max-width: 768px) {
  .layui-side {
    width: 0px !important;
  }
  .layui-body {
    left: 0px !important;
    width: 100% !important;
  }
  .layui-logo {
    display: none !important;
  }
  .layui-layout-left {
    left: 0px !important;
  }
}
</style>
